<template>
    <div class="three-picker">
        <transition name="picker">
            <div class="picker-wlist" v-if="pickerShow">
                <div class="positionR picker-clist">
                    <div class="picker-choise picker-item">
                        <span class="picker-first picker-choised" :class="{'before-choise':!province}">{{province||'请选择'}}</span>
                        <span v-if="province" class="picker-second picker-choised" :class="{'before-choise':!city}">{{city||'请选择'}}</span>
                        <span v-if="city" class="picker-third picker-choised" :class="{'before-choise':!country}">{{country||'请选择'}}</span>
                    </div>
                    <ul class="picker-list">
                        <!--对height的判断是解决ios中无法滑动的问题-->
                        <li class="province-item"
                            v-for="provinceValue in picker.list"
                            :style="{height:provinceValue.id == provinceChoiseId ? '5rem': 'auto'}">
                            <div v-if="choiseProvince">
                                <div class="picker-item" @click="choiseCityFn(provinceValue.value,provinceValue.id,!!provinceValue.sonValues,'province')" >
                                    {{provinceValue.value}}
                                </div>
                            </div>
                            <div class="city-item"
                                 v-else-if="(choiseCity || choiseCountry) && provinceValue.id == provinceChoiseId && provinceValue.sonValues"
                                 :style="{height:(choiseCity || choiseCountry) && provinceValue.id == provinceChoiseId && provinceValue.sonValues ? '5rem': 'auto'}" >
                                <div  v-for="cityValue in provinceValue.sonValues">
                                    <div class="picker-item" v-if="choiseCity"  @click="choiseCityFn(cityValue.value,cityValue.id,!!cityValue.sonValues,'city')">
                                        {{cityValue.value}}
                                    </div>
                                    <div v-if="choiseCountry && cityValue.id == cityChoiseId && cityValue.sonValues">
                                        <div class="picker-item"  v-for="countryValue in cityValue.sonValues" @click="choiseCityFn(countryValue.value,countryValue.id,!!countryValue.sonValues,'country')">
                                            {{countryValue.value}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
    export default {
        name: "ThreePicker",
        props:{
            pickerProps:Object
        },
        data(){
           return{
               bordShow:false,
               choiseCity:false,
               choiseProvince:true,
               choiseCountry:false,
               choiseId:0,
               provinceChoiseId:0,
               cityChoiseId:0,
               countryChoiseId:0,
               pickerShow:false,//是否显示下滑的picker
               province:'',//省份
               city:'',//城市
               country:'',//县城
               picker:{
                   list:[
                           /*{
                           "id": 1,
                           "value": "",
                           "current": true,                                 // ----是否当前值---
                           "desc": null,
                            "sonValues":{
                                "id": 1,
                                "value": "",
                                "current": true,                                 // ----是否当前值---
                                "desc": null,
                                "sonValues":{
                                    "id": 1,
                                    "value": "",
                                    "current": true,                                 // ----是否当前值---
                                    "desc": null,
                                }
                            },
                        }*/
                    ]
               }
           }
        },
        mounted(){
            this.picker = Object.assign({},this.picker,this.pickerProps);
        },
        methods:{
            choiseCityFn(value,choiseId,isNextClass,name){
                let that = this;
                switch (name) {
                    case 'province':
                        that.province = value;
                        that.choiseId = choiseId;
                        that.provinceChoiseId = choiseId;
                        that.choiseProvince = false;
                        that.choiseCity = true;
                        that.choiseCountry=false;
                        if(!isNextClass){
                            that.closePicker({areaId:that.choiseId,location:`${that.province}`});
                        }
                        break;
                    case 'city':
                        that.city = value;
                        that.choiseId = choiseId;
                        that.cityChoiseId = choiseId;
                        that.choiseProvince = false;
                        that.choiseCity = false;
                        if(!isNextClass){
                            that.closePicker({areaId:that.choiseId,location:`${that.province}${that.city}`});
                        }else{
                            that.choiseCountry=true;
                        }
                        break;
                    case 'country':
                        that.country = value;
                        that.choiseId = choiseId;
                        that.countryChoiseId = choiseId;
                        if(!isNextClass){
                            that.closePicker({areaId:that.choiseId,location:`${that.province}${that.city}${that.country}`})
                        }
                        /*这里只写三级所以无论如何都关闭*/
                        that.closePicker({areaId:that.choiseId,location:`${that.province}${that.city}${that.country}`})
                        break;
                }

            },
            closePicker(obj){
                this.pickerShow = false;
                this.$emit('closePicker',obj);
            },
        },
        components:{
            'v-bord':()=>import('../alert/Bord'),
        },
        watch:{
            pickerProps(val){
                this.picker = Object.assign({},this.picker,val);
            },
            pickerShow(val){
                if(!val){
                    this.province = ''
                    this.city = ''
                    this.country = ''
                    this.choiseCity=false;
                    this.choiseProvince=true;
                    this.choiseCountry=false;
                    this.choiseId=0;
                    this.provinceChoiseId=0;
                    this.cityChoiseId=0;
                    this.countryChoiseId=0;
                    this.picker = Object.assign({},this.picker,this.pickerProps);
                }
            }
        }
    }
</script>

<style scoped>
    .picker-wlist{
        width: 3.75rem;
        height: 5.5rem;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: 1060;
        background-color: #fff;
        position: fixed;
        border-top-left-radius: .05rem;
        border-top-right-radius: .05rem;
    }
    .picker-clist{
        padding-top: .5rem;
        width: 3.75rem;
    }
    .picker-list{
        height: 5rem;
        overflow: auto;
    }
    .picker-item{
        height: .5rem;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        line-height: .5rem;
        font-size: .15rem;
        color: #333333;
    }
    .picker-choise{
        font-weight: bold;
        border-bottom:1px solid #F0F0F0;
        position: absolute;
        left: 0;
        top: 0;
    }
    .before-choise{
        color: #5D89E8;
    }
    .picker-choised{
        letter-spacing: .02rem;
        padding-right: .3rem;
    }
    .picker-leave-active{
        /*bottom: -5.5rem;*/
        -webkit-transform: translateY(-5.5rem);
        -moz-transform: translateY(-5.5rem);
        -ms-transform: translateY(-5.5rem);
        -o-transform: translateY(-5.5rem);
        transform: translateY(-5.5rem);
        transition: all .3s linear;
    }
    .picker-enter-active{
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
        transition: all .3s linear;
    }
    .picker-enter, .picker-leave-to {
        -webkit-transform: translateY(5.5rem);
        -moz-transform: translateY(5.5rem);
        -ms-transform: translateY(5.5rem);
        -o-transform: translateY(5.5rem);
        transform: translateY(5.5rem);
    }
    .city-item{
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    .province-item{
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
</style>